<!DOCTYPE html>
<html>
	<head>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<meta charset="UTF-8">
		<title>58图集</title>
		<link rel="stylesheet" href="__PUBLIC__/css/base.css" />
		<link rel="stylesheet" href="__PUBLIC__/css/layer.css" />
		<link rel="stylesheet" href="__PUBLIC__/css/style.css" />
		<script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js" ></script>
		<script type="text/javascript" src="__PUBLIC__/js/layer.js" ></script>
	</head>
	<body>
		<!--header-->
		<header id="header">
			<a href="javascript:$('#mask,.loginMask').show()" class="headerLogin"></a>
			<a href="javascript:$('#mask,.headerUserContent').show()" class="headerMenu"></a>
			<p>个人中心</p>
		</header>
		<!--header end-->
		<!--content-->
		<div id="content">
			<!--用户中心-->
			<div class="userContent homeTabs">
				<form>
					<dl>
						<dt>
							<span>| 用户中心 |</span>
						</dt>
						<dd>
							<span class="label">您的主页名称：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
								</p>
							</div>	
						</dd>
						<dd>
							<span class="label">您的网页地址：</span>
							<div class="userContentItem">
								<p>
									<span>www.</span>
									<input type="text" class="_txt1" />
									<span>.58jitu.com</span>
								</p>
								<p class="tips">*注：一旦确认,不能修改</p>
							</div>	
						</dd>
						<dd>
							<span class="label">您的邮箱绑定：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
									<a href="#" class="modify_btn">修改</a>
								</p>
							</div>	
						</dd>
						<dd>
							<span class="label">您的账户类型：</span>
							<div class="userContentItem">
								<p>
									<span>免费用户</span>
									<a href="#" class="upgrade_btn">升级</a>
								</p>
							</div>	
						</dd>
					</dl>
					<div class="userContentUpload">
						<a href="javascript:void(0)" class="del_btn">删除</a>
						<dl class="nobr">
							<dt>
								<span>| 个人横幅设置 |</span>
							</dt>
							<dd>
								<div class="userContentItem">
									<div class="imgsItem">
										<em class="imgs_title">+ 上传横幅</em>
										<input type="file" class="upload_image" name="imgs" />
										<div class="preview_btn">
											<a href="#">点击预览</a>
										</div>
										<img class="upload_image_img" />
									</div>
								</div>
							</dd>
						</dl>
					</div>
					<!--btn-->
					<div class="saveBtns">
						<a href="#">保存</a>
					</div>
					<!--btn end-->
				</form>	
			</div>
			<!--用户中心 end-->
			<!--相册服务-->
			<div class="homeTabs photoService">
				<form>
					<dl>
						<dt>
							<span>| 新建相册 |</span>
						</dt>
						<dd>
							<span class="label">相册命名：</span>
							<div class="userContentItem">
								<p>
									<select class="_select">
										<option>默认相册1</option>
										<option>默认相册2</option>
										<option>默认相册3</option>
									</select>
								</p>
							</div>	
						</dd>
						<dd>
							<span class="label">相册描述：</span>
							<div class="userContentItem">
								<p>
									<textarea class="_textarea" placeholder="请输入不多于200字的文字描述"></textarea>
								</p>
							</div>	
						</dd>
					</dl>
					<div class="newAlbumContentUpload">
						<dl>
							<dt>
								<span>| 相册排序 |</span>
							</dt>
							<dd>
								<ul>
									<li>
										<label>
											<input type="radio" name="timer" checked="" value="1" />
											<em>按时间排序</em>
										</label>
									</li>
									<li>
										<label>
											<input type="radio" name="timer" value="1" />
											<em>按时间排序</em>
										</label>
									</li>
									<li>
										<label>
											<input type="radio" name="timer" value="1" />
											<em>按时间排序</em>
										</label>
									</li>
									<li>
										<label>
											<input type="radio" name="timer" value="1" />
											<em>按时间排序</em>
										</label>
									</li>
								</ul>
							</dd>
						</dl>
					</div>
					<!--批量设置密码-->
					<div class="batchPassword">
						<dl class="nobr">
							<dt>
								<span>| 批量设置密码 |</span>
							</dt>
							<dd>
								<span class="label">设置密码：</span>
								<div class="userContentItem">
									<p>
										<input type="password" class="_txt" />
									</p>
								</div>
							</dd>
							<dd>
								<span class="label">确认密码：</span>
								<div class="userContentItem">
									<p>
										<input type="password" class="_txt" />
									</p>
								</div>
							</dd>
							<dd>
								<span class="label">应用相册：</span>
								<div class="userContentItem">
									<p>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
										<span class="labels">相册名称1</span>
									</p>
								</div>
							</dd>
						</dl>
					</div>
					<!--批量设置密码 end-->
					<!--btn-->
					<div class="saveBtns">
						<a href="#">保存</a>
					</div>
					<!--btn end-->
				</form>
			</div>
			<!--相册服务 end-->
			<!--装修相册-->
			<div class="homeTabs decorationAlbum">
				<form>
					<dl>
						<dt>
							<span>| 相册模板 |</span>
						</dt>
						<dd>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>相册模板1</p>
								</div>
							</div>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>相册模板2</p>
								</div>
							</div>
						</dd>
						<dd>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>相册模板3</p>
								</div>
							</div>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>相册模板4</p>
								</div>
							</div>
						</dd>
					</dl>
					<dl class="nobr">
						<dt>
							<span>| 模板应用 |</span>
						</dt>
						<dd>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>
										<span>相册1</span>
										<a href="javascript:photoTemplate()" class="choose_muban">模板</a>
									</p>
								</div>
							</div>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>
										<span>相册2</span>
										<a href="javascript:photoTemplate()" class="choose_muban">模板</a>
									</p>
								</div>
							</div>
						</dd>
						<dd>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>
										<span>相册3</span>
										<a href="javascript:photoTemplate()" class="choose_muban">模板</a>
									</p>
								</div>
							</div>
							<div class="userContentItem">
								<div class="decorationAlbumItem">
									<span class="img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>
										<span>相册4</span>
										<a href="javascript:photoTemplate()" class="choose_muban">模板</a>
									</p>
								</div>
							</div>
						</dd>
					</dl>
					<!--btn-->
					<div class="saveBtns">
						<a href="#">保存</a>
					</div>
					<!--btn end-->
				</form>	
			</div>
			<!--装修相册 end-->
			<!--用户设置-->
			<div class="homeTabs userSet">
				<form>
					<dl>
						<dt>
							<span>| 头像设置 |</span>
						</dt>
						<dd>
							<div class="userContentItem">
								<span class="user_img">
									<img src="__PUBLIC__/img/img.png" />
								</span>
								<p>
									<a href="#" class="modifyBtn">修改</a>
								</p>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>
							<span>| 昵称设置 |</span>
						</dt>
						<dd>
							<span class="label">您的昵称：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
								</p>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>
							<span>| 联系信息 |</span>
						</dt>
						<dd>
							<span class="label">联 系 人：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
								</p>
							</div>
						</dd>
						<dd>
							<span class="label">邮箱地址：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
								</p>
							</div>
						</dd>
						<dd>
							<span class="label">联系电话：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
								</p>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>
							<span>| 出生年月 |</span>
						</dt>
						<dd>
							<span class="label">出生年月：</span>
							<div class="userContentItem">
								<p>
									<select class="_select">
										<option>1990</option>
										<option>1991</option>
									</select>
								</p>
								<br  />
								<p>
									<select class="_select">
										<option>1</option>
										<option>2</option>
									</select>
								</p>
							</div>
						</dd>
					</dl>
					<dl>
						<dt>
							<span>| 所在地区 |</span>
						</dt>
						<dd>
							<span class="label">所在地区：</span>
							<div class="userContentItem">
								<p>
									<select class="_select">
										<option>北京市</option>
										<option>广州市</option>
									</select>
								</p>
								<br  />
								<p>
									<select class="_select">
										<option>天河区</option>
										<option>白云区</option>
									</select>
								</p>
								<br  />
								<p>
									<input type="text" class="_txt" placeholder="详细地址" />
								</p>
							</div>
						</dd>
					</dl>
					<dl class="nobr">
						<dt>
							<span>| 登录密码 |</span>
						</dt>
						<dd>
							<span class="label">旧 密 码：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" placeholder="" />
								</p>
							</div>
						</dd>
						<dd>
							<span class="label">修改密码：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" placeholder="" />
								</p>
							</div>
						</dd>
						<dd>
							<span class="label">确认密码：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" placeholder="" />
								</p>
							</div>
						</dd>
					</dl>
					<!--btn-->
					<div class="saveBtns">
						<a href="#">保存</a>
					</div>
					<!--btn end-->
				</form>
			</div>
			<!--用户设置 end-->
			<!--VIP服务-->
			<div class="homeTabs vipservice">
				<form>
					<dl class="nobr">
						<dt>
							<span>| VIP服务 |</span>
						</dt>
						<dd>
							<span class="label">VIP尊享特权：</span>
							<div class="userContentItem">
								<p style="margin-top: 6px;">
									1.VIP用户可以享受本网站的无限空间以及创建最多至100相册；
								</p>
								<p style="margin-top: 6px;">
									2.VIP用户可以享受本网站的无限空间以及创建最多至100相册；
								</p>
							</div>	
						</dd>
						<dd>
							<span class="label">购买年限：</span>
							<div class="userContentItem">
								<p>
									<input type="text" class="_txt" />
								</p>
							</div>	
						</dd>
						<dd>
							<span class="label">应付金额：</span>
							<div class="userContentItem">
								<p>
									<span>￥420.00元</span>
								</p>
							</div>	
						</dd>
					</dl>
					<!--btn-->
					<div class="saveBtns">
						<a href="#">确定</a>
					</div>
					<!--btn end-->
				</form>	
			</div>
			<!--VIP服务 end-->
		</div>
		<!--content end-->
		<!--msak-->
		<div id="mask">
			<!--未登录框-->
			<div class="loginMask">
				<ul>
					<li>
						<a href="javascript:$('#mask,.loginUserMask').show()" class="login_btn">登录</a>
					</li>
					<li>
						<a href="#" class="register_btn">注册</a>
					</li>
				</ul>
				<span class="colse_btn" onclick="javascript:$('#mask,.loginMask').hide()"></span>
			</div>
			<!--未登录框 end-->
			<!--已登录框-->
			<div class="loginUserMask">
				<span class="colse_btn" onclick="javascript:$('#mask,.loginUserMask').hide()"></span>
				<dl>
					<dt>
						<span class="user_img">
							<img src="__PUBLIC__/img/img.png" />
						</span>
					</dt>
					<dd>张三李四</dd>
				</dl>
				<ul>
					<li>
						<a href="#">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon.png" />
								</span>
								<em>58集图</em>
							</p>
						</a>
					</li>
					<li>
						<a href="index.html">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon1.png" />
								</span>
								<em>我的主页</em>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon2.png" />
								</span>
								<em>帐号管理</em>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon3.png" />
								</span>
								<em>退出登录</em>
							</p>
						</a>
					</li>
				</ul>
			</div>
			<!--已登录框 end-->
			<!--个人中心-->
			<div class="headerUserContent maskMain">
				<span class="colse_btn" onclick="javascript:$('#mask,.headerUserContent').hide()"></span>
				<dl>
					<dt>
						<span>个人中心</span></dt>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=1"><span>用户中心</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=2"><span>相册服务</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=3"><span>装修相册</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=4"><span>用户设置</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=5"><span>VIP服务</span></a>
					</dd>
				</dl>
			</div>
			<!--个人中心 end-->
		</div>
		<!--msak end-->
		<div class="photoTemplate">
			<select class="_select">
				<option>模板1</option>
				<option>模板2</option>
				<option>模板3</option>
				<option>模板4</option>
				<option>模板5</option>
				<option>模板5</option>
				<option>模板5</option>
				<option>模板5</option>
			</select>
			<a href="#">确定</a>
		</div>
	</body>
	<script>
		
	  	var photoTemplateMask;
	  	function photoTemplate(){
	  		photoTemplateMask = layer.open({
			 	type: 1,
			 	area:["200px","170px"],
			  	title: "选择模板", 
			  	content: $('.photoTemplate') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
			});
	  	};
		$(function(){
			$(".photoService .labels").click(function(){
				$(this).toggleClass("on");
			});
			//上传图片
			$(".upload_image").live('change',function(event) {
				var obj = $(this);
				var files = event.target.files, file; 
				if (files && files.length > 0 ){
					file = files[0]; 
					var URL = window.URL || window.webkitURL; 
					var imgURL = URL.createObjectURL(file); 
					obj.siblings(".upload_image_img").show().attr("src",imgURL);
					obj.siblings(".preview_btn").show();
					$(".userContentUpload .del_btn").addClass("del_btn_on");
				} 
			});
			//删除图片
			$(".userContentUpload .del_btn").click(function(){
				if($(this).hasClass("del_btn_on")){
				 	$(this).removeClass("del_btn_on");
				 	$(".imgsItem").find(".preview_btn").hide();
				 	$(".imgsItem").find(".upload_image_img").hide().attr("src","");
				 	$(".imgsItem").find(".upload_image").val("");
				}
			});
			var types = getUrlParam("types");
			if(types == null || types == ""){
				types = 1;
			}
			$(".homeTabs").eq(types-1).show();
		});
		 //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
	</script>
</html>	